<template>
	<view class="invite-form bg-primary box relative full p-safe flex-col" :style="statusBarHeightStyle">
		<view class="header-wrap">
			<image class="header-img"
				src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/202508032313595dc6c6049.png"
				mode="aspectFill">
			</image>
			<view class="custom-navbar">
				<image @click="handleBack" src="/static/icon/chevron-_left_white.png" mode="aspectFill"
					class="back-icon"></image>
				<text class="header-title">水管家加盟</text>
			</view>
			<view class="user-info">
				<image mode="aspectFill" class="user-avatar"></image>
				<view class="info-decs">
					<text class="user-name">张三丰</text>
					<text class="info-label">邀请您成为:水管家</text>
				</view>
			</view>
		</view>
		<view class="w-wrap" style="margin-top: -150rpx;">
			<view class="w-inner">
				<scroll-view scroll-y="true" class="full" style="border-radius: 16rpx;padding: 0 32rpx;">
					<view class="banner-image">

					</view>
					<view class="form-box">
						<u-form label-width="180rpx" :model="formData" :rules="formRules" ref="formRef">
							<u-form-item label="姓名：" prop="name">
								<u-input v-model="formData.name" placeholder="请输入姓名" />
							</u-form-item>
							<u-form-item label="联系方式：" prop="mobile">
								<u-input v-model="formData.mobile" placeholder="请输入联系方式" />
							</u-form-item>
							<u-form-item label="验证码:" prop="code">
								<u-input type="number" v-model="formData.code" placeholder="请输入验证码" />
								<template #right>
									<view class="get-code-btn">
										<text>{{ codeText }}</text>
									</view>
								</template>
							</u-form-item>
							<u-form-item label="密码:" prop="password">
								<u-input v-model="formData.password" type="password" placeholder="请输入系统登录密码" />
							</u-form-item>
							<u-form-item label="确认密码:" prop="copy_password">
								<u-input v-model="formData.copy_password" type="password" placeholder="再次输入密码" />
							</u-form-item>
							<u-form-item label="详细地址：" prop="shouhuo_address">
								<u-input v-model="formData.shouhuo_address" placeholder="请输入详细地址" />
							</u-form-item>
						</u-form>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="confirm-btn" @click="handleConfirm">
			<text>下一步</text>
		</view>
		<u-verification-code :seconds="seconds" @end="handleOnCodeEnd" @start="handleOnCodeStart" ref="codeRef"
			@change="handleCodeChange" />
	</view>
</template>

<script>
	import mixin from "@/mixins/mixin.js"
	import { request, showLoading, toast } from "@/utils/tool"
	export default {
		data() {
			return {
				codeText: "获取验证码",
				seconds: 60,
				formData: {
					name: "",
					mobile: "",
					password: "",
					copy_password: "",
					code: "",
					shouhuo_address: "",
					guanjia_user_id: 1,
				},
			}
		},
		computed: {
			formRules() {
				return {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					mobile: [{
						required: true,
						message: '请输入联系方式',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入系统登录密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					copy_password: [{
						required: true,
						message: '请再次输入密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.formData.password === this.formData.copy_password
						},
						message: "两次输入的密码不一致"
					}],
					// address: [{
					// 	required: true,
					// 	message: '请选择水管家自用机收货地址',
					// 	// 可以单个或者同时写两个触发验证方式 
					// 	trigger: ['change', 'blur'],
					// }],
					shouhuo_address: [{
						required: true,
						message: '请输入收货地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				}
			}
		},
		mixins: [mixin],
		onLoad(ev) {
			if (ev.guanjia_user_id) {
				this.formData.guanjia_user_id = ev.guanjia_user_id
			}
		},
		onReady() {
			this.$refs.formRef.setRules(this.formRules);
		},
		created() {

		},
		methods: {

			handleConfirm() {
				this.$refs.formRef.validate(async (valid) => {
					if (!valid) return
					const payload = { ...this.formData }
					const hide = showLoading("正在提交")
					const resp = await request({
						url: "/zhaoshang/yaoqingjiameng",
						data: payload
					}).finally(hide)
					console.log(resp, 'resp')
					if (resp.code !== 1) return toast({ title: "申请失败", icon: "error" })
					const data = resp.data
					if (data) {
						uni.navigateTo({
							url: "/pages/pay/index?data=" + JSON.stringify(data),
						})
					}
				})
			},
			handleCodeChange(text) {
				this.codeText = text;
			},
			handleOnCodeEnd() {
				console.log('end');
			},
			handleOnCodeStart() {
				console.log('start');
			},
			handleBack() {
				uni.navigateBack()
			},
			async initData(id) {
				const hide = showLoading("正在获取")

				const resp = await request({
					url: "/team/userdetail",
					method: "GET",
					data: {
						user_id: id
					}
				}).finally(hide)
				if (!resp.data.five_month_list) resp.data.five_month_list = []
				this.userDetail = resp.data
				console.log(resp.data, 'resp.data');
			},
			handleBack() {
				uni.navigateBack()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.invite-form {
		.confirm-btn {
			margin: 44rpx auto 0;
			width: 437rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 36rpx;
			color: #FFFFFF;
			background: linear-gradient(90deg, #7FA7E7 0%, #0A67FD 100%);
			border-radius: 38rpx 38rpx 38rpx 38rpx;
		}

		.form-box {
			margin: 22rpx 0 0;
			padding: 32rpx 22rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			box-sizing: border-box;
			position: relative;

			.get-code-btn {
				width: 138rpx;
				height: 46rpx;
				line-height: 46rpx;
				text-align: center;
				font-size: 20rpx;
				color: #FFFFFF;
				background: linear-gradient(90deg, #85AAE6 0%, #0967FE 100%);
				border-radius: 23rpx 23rpx 23rpx 23rpx;
			}



			.form-text {
				font-size: 28rpx;
				color: #464655;
				line-height: 40rpx;
			}
		}

		.banner-image {
			box-sizing: border-box;
			position: relative;
			height: 437rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			background-color: #fff;
		}

		.header-wrap {
			width: 100%;
			box-sizing: border-box;
			position: relative;
			height: 506rpx;
			padding-top: var(--status-height-value);

			.user-info {
				padding: 12rpx 40rpx;
				box-sizing: border-box;
				position: relative;
				display: flex;
				align-items: center;

				.info-decs {
					margin-left: 28rpx;
					display: flex;
					flex-flow: column;

					.info-label {
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 44rpx;
						margin-top: 20rpx;
					}

					.user-name {
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 44rpx;
					}
				}

				.user-avatar {
					width: 144rpx;
					height: 144rpx;
					border-radius: 50%;
					background: #f1f1f1;
				}
			}


			.custom-navbar {
				display: flex;
				align-items: center;
				height: 88rpx;
				position: relative;
				padding: 0 36rpx;
				box-sizing: border-box;

				.back-icon {
					width: 48rpx;
					height: 48rpx;
				}

				.header-title {
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.header-img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}
</style>